<template>
    <router-view v-if="!isLogin" />
    <div class="common-layout" v-else>
        <el-container>
            <el-aside :width="width">
                <Sider />
            </el-aside>
            <el-container>
                <el-header>
                    <Header />
                </el-header>
                <el-main>
                    <router-view v-slot="{ Component }">
                        <transition name="fade" mode="out-in">
                            <component :is="Component"></component>
                        </transition>
                    </router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { menuStore } from "@/store/menu";
import { userStore } from "@/store/user";
import Sider from "@/components/Sider";
import Header from "@/components/Header";
import { onBeforeMount, ref, watch } from "vue";

const menu = menuStore();
const user = userStore();
const width = ref(menu.isCollapsed ? "64px" : "240px");
const isLogin = ref(user.isLogin);

onBeforeMount(() => {
    user.setLogin();
});

watch(
    () => menu.isCollapsed,
    () => {
        width.value = menu.isCollapsed ? "64px" : "240px";
    }
);

watch(
    () => user.isLogin,
    () => {
        isLogin.value = user.isLogin;
    }
);
// console.log(width)
</script>

<style lang="scss">
#app {
    height: 100vh;

    .common-layout {
        height: 100%;

        .el-container {
            height: 100%;

            .el-aside {
                background: var(--el-fill-color-darker);
                transition: 0.5s;
            }

            .el-main {
                background: var(--el-fill-color-dark);
                padding: 1rem;
            }

            .el-header {
                background: var(--el-border-color);
            }
        }
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--el-text-color-primary);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

// 页面切换动画
.fade-enter-active {
    opacity: 0;
    transition: opacity 0.3s;
}

.fade-enter {
    opacity: 0;
}

.fade-enter-to {
    opacity: 1;
}

.fade-leave {
    opacity: 1;
}

.fade-leave-active {
    opacity: 0;
    transition: opacity 0.3s;
}

.fade-leave-to {
    opacity: 0;
}
</style>
